iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
自我挑戰組

輕鬆Vue一下系列 第 13

Day13-監聽屬性watch

  • 分享至 

  • xImage
  •  

儘管在大多數情況下計算屬性就夠使用了,但有時也需要一個自定義的監聽器。它的使用方式如下:
https://ithelp.ithome.com.tw/upload/images/20190929/20112076J6REzCB15W.jpg
https://ithelp.ithome.com.tw/upload/images/20190929/20112076bh8fCC4GsT.jpg
watch中寫入監聽目標的變數,並定義當變數發生改變時,欲執行的函數。上圖中,兩個函數的目的皆是將firstNamelastName組合成fullName
變數未發生改變時:
https://ithelp.ithome.com.tw/upload/images/20190929/20112076Wo58KeLBjg.jpg
當監聽目標的變數發生變動時:
https://ithelp.ithome.com.tw/upload/images/20190929/20112076KA5pOFTJcv.jpg
透過示範可以發現程式碼有是重複的。如果把整段用之前介紹的computed,程式碼會變得簡潔許多,如下:
https://ithelp.ithome.com.tw/upload/images/20190929/20112076WTJKqH3fhf.jpg
因此,當需要在數據變化時執行異步或開銷較大的操作時,才會比較建議使用自定義的監聽器的方式。
明日預告:匯率計算機(css)


上一篇
Day12-方法methods
下一篇
Day14-匯率計算機(html)
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言